<template>
  <div class="ripple-theme-toggle"></div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { useThemeStore } from '@/store'

const themeStore = useThemeStore()

// 创建涟漪主题切换动画
const createRippleTransition = () => {
  // 检查浏览器支持
  if (!('startViewTransition' in document)) {
    return
  }

  // 从右上角开始的涟漪效果（主题按钮位置）
  const x = window.innerWidth - 80
  const y = 80

  // 计算能覆盖整个屏幕的圆形半径
  const maxRadius = Math.hypot(
    Math.max(x, window.innerWidth - x),
    Math.max(y, window.innerHeight - y)
  )

  try {
    // 使用 View Transitions API
    const transition = (document as any).startViewTransition(() => {
      // 主题已经在外部切换了，这里不需要再次切换
    })

    // 等待过渡准备就绪
    transition.ready.then(() => {
      // 创建圆形扩散动画 - 从右上角开始扩散
      document.documentElement.animate(
        {
          clipPath: [
            `circle(0px at ${x}px ${y}px)`,
            `circle(${maxRadius}px at ${x}px ${y}px)`,
          ],
        },
        {
          duration: 3000, // 3秒动画
          easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
          pseudoElement: '::view-transition-new(root)',
        }
      )
    }).catch(() => {
      // 动画失败时的处理
    })
  } catch (error) {
    // 如果出错，静默处理
  }
}

// 监听主题变化
watch(() => themeStore.isDark, (newValue, oldValue) => {
  // 只有在主题真正发生变化时才触发动画
  if (newValue !== oldValue && oldValue !== undefined) {
    createRippleTransition()
  }
})

// 暴露方法供外部调用
defineExpose({
  createRippleTransition
})
</script>

<style>
/* View Transitions API 样式 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2147483646;
}

/* 深色主题时的层级顺序 */
html.dark::view-transition-old(root) {
  z-index: 2147483646;
}

html.dark::view-transition-new(root) {
  z-index: 1;
}

/* 确保涟漪效果流畅 */
html {
  view-transition-name: root;
}
</style> 